<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/style.css">
    <link rel="icon" href="data:," /> <!-- 指向一个空的 favicon -->
    <title>AI Web 应用</title>

    <style>
        /* Basic reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        @keyframes colorFlow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Body 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-image: url('/static/css/469dfc9b0206637c8254effe01fb8b48.png');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
            background-attachment: fixed; /* 背景固定 */
            color: #333;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            height: 100vh;
        }

        /* 左侧菜单样式 */
        .sidebar {
            width: 300px;
            height: 100vh; /* 设置高度为屏幕高度 */
            background: rgba(44, 62, 80, 0.8); /* 半透明背景 */
            position: fixed; /* 固定位置 */
            top: 0;
            left: 0;
            box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* 添加阴影 */
            display: flex;
            flex-direction: column;
            padding: 20px 10px;
            z-index: 2; /* 确保菜单在最前面 */
        }

        /* 菜单标题样式 */
        .sidebar .title {
            font-size: 24px;
            font-weight: bold;
            color: #ecf0f1;
            margin-bottom: 20px;
            text-align: center;
        }

        .sidebar a {
            text-decoration: none;
            color: #ecf0f1; /* 浅白色字体 */
            padding: 10px 15px;
            margin: 5px 0;
            display: block;
            border-radius: 5px; /* 添加圆角 */
            font-size: 16px;
            font-weight: bold;
            transition: background 0.3s ease, transform 0.3s ease; /* 鼠标悬停时添加过渡效果 */
        }

        .sidebar a:hover {
            background: #34495e; /* 鼠标悬停变成深蓝色 */
            color: #ffffff; /* 字体颜色变成纯白 */
            transform: scale(1.05); /* 鼠标悬停时稍微放大 */
        }

        /* 主体内容区域 */
        .content {
            flex-grow: 1; /* 使内容区域填充剩余空间 */
            display: flex;
            justify-content: center; /* 水平居中 iframe */
            align-items: center; /* 垂直居中 iframe */
        }
        #content-frame {
            width: 100%; /* iframe 宽度 */
            height: 100vh; /* iframe 高度 */
            border: none; /* 移除 iframe 边框 */
            margin-left: 150px;
        }

        /* Container setup */
        .container {
            text-align: center;
            width: 100%;
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影 */
            margin: 0 auto; /* 保证居中 */
            max-width: none; /* 去掉最大宽度限制 */
            height: auto; /* 高度自适应 */
        }

        /* Header 样式 */
        header h1 {
            font-size: 36px;
            margin-bottom: 10px;
            color: black;
        }

        header p {
            font-size: 18px;
            margin-bottom: 40px;
            color: black;
        }

        /* 按钮组 */
        .options {
            display: flex; /* 使用Flexbox布局 */
            justify-content: center; /* 将按钮居中对齐 */
            align-items: center; /* 垂直居中对齐 */
            gap: 30px; /* 按钮之间的间距 */
        }

        .option-btn {
            background-image: linear-gradient(to right, white 0%, white 51%, grey 90%); /* 按钮背景渐变 */
            margin: 10px;
            padding: 15px 45px;
            text-align: center;
            text-transform: uppercase;
            transition: 0.5s, transform 0.3s ease;
            background-size: 200% auto;
            color: black;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 添加立体感 */
            border-radius: 10px;
            display: inline-block;
            text-decoration: none;
            border: none;
            position: relative;
            overflow: hidden;
        }

        .option-btn:hover {
            background-position: right center; /* 鼠标悬停时背景渐变方向 */
            color: #fff;
            text-decoration: none;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* 鼠标悬停时阴影更深 */
            transform: translateY(-6px) scale(1.05); /* 鼠标悬停时轻微上移并放大 */
        }
        .description {
            color: white; /* 文字颜色 */
            font-size: 14px; /* 字体大小 */
            line-height: 1.5; /* 行高 */
            margin-top: 600px; /* 上边距 */
        }
    </style>
</head>
<body>
    <!-- 左侧菜单 -->
    <div class="sidebar">
        <div class="title">AI Web 应用</div> <!-- 菜单标题 -->
        <a onclick="loadPage('index')">主页</a>
        <a onclick="loadPage('object_detection')">目标检测</a>
        <a onclick="loadPage('image_segmentation')">图像分割</a>
        <a onclick="loadPage('image_generation')">图像生成</a>
        <div class="description">
        <i class="fa-solid fa-bell"> 使用说明</i>
        <p>1.目标检测:基于YOLO11对四种非洲野生动物(水牛,大象,犀牛和斑马)的目标检测,数据集包含1052 幅图像</p>
        <p>2.图像分割:基于YOLO11对coco数据集进行图像分割</p>
        </div>
    </div>

    <!-- 右侧内容区域 -->
    <div class="content">
            <iframe id="content-frame" src="index.html"></iframe>
    </div>


    <script>
        function loadPage(page) {
            // 动态加载页面
            const aframe = document.getElementById("content-frame");
            aframe.src = `${page}.html`;
        }
    </script>
</body>
</html>
